<template>
  <div>
    <div class="title">
      <image src="/static/search.svg" class="search" mode="widthFix"/>
      <image src="/static/furhter_logo.svg" class="logo" mode="widthFix"/>
    </div>

    <view class="page">

      <view class="page-bottom">
        <view class="page-content">
          <div class="hr"></div>
          <div class="clear"></div>
          <view class="wc active">
            <text>报道</text>
          </view>
          <view class="wc">
            <text>视频</text>
          </view>
          <view class="wc">
            <text>发现</text>
          </view>
          <view class="wc">
            <text>关于</text>
          </view>
          <div class="clear"></div>
          <div class="name"><image src="/static/Ellipse.jpg" class="logo" mode="widthFix"/><span>我 · 我的</span></div>
        </view>
      </view>


      <view class="page-top" :class="{state2: isActive}">
        <div class="pagebj1">
        <image src="/static/timg.jpg" class="cat_topimg" mode="widthFix"/>
        <div class="cat_topname">报道 | 人物志</div>
        <div class="cat_n">李兰迪：演员未满<span><em>05</em>Oct.2018</span></div>
        <div class="cat_hr"></div>
        <div class="cat_text">穿着深蓝色制服上衣与红色格子裙，北京师大附中 2018 届高三的学生李兰迪毕业了。很快，这场毕业典礼登上微博热门话题榜。</div>
        <div class="cat_hr2"></div>
        <div class="cat_logo"><image src="/static/Rectangle 7.jpg" class="cat_topimg" mode="widthFix"/><span>魏紫钰</span><i></i><em>文</em></div>
        </div>
        <div class="pagebj2"></div>
        <div class="pagebj3"></div>
      </view>

      <view class="bt" @click="tap_ch" >
            <image  :src="valuesrc" mode="widthFix" class="btbj"/>
                <view class="btn-nav" :class="{animated: isActive}">
                  <span class="icon-bar top"></span>
                  <span class="icon-bar middle"></span>
                  <span class="icon-bar bottom"></span>
            </view>
      </view>

    </view>

  </div>
</template>

<script>
export default {
  data () {
      return {
                isActive: false,
                valuesrc: "/static/corner_button.svg"
            }
  },




  methods: {
      tap_ch: function(e){
    
        if(this.isActive){
          this.isActive = false;
          // this.valuesrc = "/static/corner_button.svg"
          console.log(this.open);
        }else{
          this.isActive = true;
          // this.valuesrc = "/static/close.svg"
        }

      }
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.search{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }


.top{width: 100%; height: auto; display: block; float: left; margin:80px 0 10px; font-size: 30px; color: #000000; text-align: center;}
.top span{width: 100%; height: auto; display: block; float: left;margin: 0 0 15px;font-family: Source Han Serif SC; }
.top i{width: 24px; height: 2px; display: block; float: left; background: #F62525; margin: 0 175.5px 18px}
.top p{width: 240px; height: auto; display: block; float: left;  line-height: 22px; color: rgba(0,0,0,.4); font-size: 14px;font-family: PingFang SC;margin: 0 67.5px 0px }
.cat_topimg{ width: 100%; height: auto; display: block; float:left;}
.cat_topname{ width: auto; height: 32px; line-height: 32px; font-size: 14px; color: #ffffff; margin: -15px 0 0; display: block; float:left;padding:0 5px; background: rgba(0,0,0,.7);}
.cat_n{ width: 88%; height: auto; display: block; float: left; margin: 34px 6% 0; font-size: 30px; line-height: 34px;color: #000000;}
.cat_n span{ width: 60px; height: auto; display: block; float: right; margin: 0; font-size: 10px; line-height: 27px;color:rgba(0,0,0,.6); text-align: right;}
.cat_n span em{width: 100%; height: auto; display: block; float: left;font-size: 18px;}
.cat_hr{width: 24px; height: 2px; display: block; float: left; background: #F62525; margin: 24px 0 0 6%;}
.cat_text{width:280px; height: auto; display: block; float: left; margin: 24px 0 0 6%; font-size: 14px; line-height: 22px;color:rgba(0,0,0,.4);}
.cat_hr2{width: 53px; height:1px; display: block; float: left; background: #C4C4C4; margin: 84px 0 0 6%;}
.cat_logo{ width: 88%; height: 24px; display: block; float: left; margin: 26px 6% 0; font-size: 14px; line-height:24px;color: #000000;}
.cat_logo image{width: 24px; height: 24px; display: block; float: left;margin:0 5px 0 0;}
.cat_logo span{width: auto; height: auto; display: block; float: left; margin:0 5px 0 0;}
.cat_logo i{width: 24px; height: 1px; display: block; float: left; margin:0 5px 0 0; background: #C4C4C4;  }




.clear{width: 100%; height: 1px; display: block; float:left;}

.page {
  height: 100%;
  width: 100%;
  float: left;
  margin: 64px 0 0 0;
}
.page-bottom{
  height: 100%;
  width: 100%;
  position: fixed; 
  background-color:rgba(245,245,245,1);
  z-index: 0;
  right: 0;
  bottom: 0;
}
.wc{
  color: white;
  text-align: right;
  height: 45px;
  line-height: 45px;
  margin: 0 60px 30px 0;
  width: 50%;
   display: block; float:right;
}

.wc text{height: 45px; font-size: 24px; line-height: 40px;color: #000000; border-bottom:3px solid #ffffff; display: block; float:right;}

.wc.active text{border-bottom:3px solid #F62525; }
.name{  text-align: right;
  height: 45px;
  line-height: 45px;
  margin: 0 55px 30px 0;
  width: 54px;
   display: block; float:right;}
.name image{width: 54px; height: 54px; border-radius: 54px;  display: block; float:right; margin: auto;}
.name span{width: 54px; height: auto;  font-size: 12px; line-height: 17px;color:rgba(0,0,0,.4);    display: block; float:right; text-align: center;margin: 5px 0 0;}
.hr{width: 30px;height: 1px; border-bottom: 1px solid rgba(0,0,0,.1);  margin: 0 70px 35px 0;display: block; float:right;}
.page-content{
  margin: 120px 0 0;
}


.page-top{
  height: 92%;
  position: fixed;
  width: 100%;
  background-color: #ffffff;
  z-index: 0;
  transition: All 0.4s ease; 
  -webkit-transition: All 0.4s ease;
  overflow:visible;
  
}


.pagebj1{ background-color: #ffffff;width: 100%;height:100%;position: fixed;overflow-y: auto;overflow-x: hidden; left: 0;width: 100%;-moz-box-shadow:3px 3px 5px rgba(0,0,0,.1); -webkit-box-shadow:3px 3px 5px rgba(0,0,0,.1); box-shadow:3px 3px 5px rgba(0,0,0,.1); z-index: 3;}

.pagebj2{ background-color: #ffffff;width: 100%;height:100%;position: fixed;overflow-y: auto;overflow-x: hidden;top: 10px; left: -10px;
  width: 100%;-moz-box-shadow:3px 3px 5px rgba(0,0,0,.1); -webkit-box-shadow:3px 3px 5px rgba(0,0,0,.1); box-shadow:3px 3px 5px rgba(0,0,0,.1); z-index: 2;}
.pagebj3{ background-color: #ffffff;width: 100%;height:100%;position: fixed;overflow-y: auto;overflow-x: hidden;top: 20px; left: -20px;
  width: 100%;-moz-box-shadow:3px 3px 5px rgba(0,0,0,.1); -webkit-box-shadow:3px 3px 5px rgba(0,0,0,.1); box-shadow:3px 3px 5px rgba(0,0,0,.1); z-index: 1;}

.bt{
  position: fixed;
  width: 90px;
  height: 90px;
  right: 0px;
  bottom: 0px;
  z-index: 9;
}

.btbj{ display:block; position:fixed; width: 90px;height: 90px;z-index: 10;}


	.btn-nav {
		position: fixed;
		right: 15px;
		bottom: 15px;
		background: transparent;
		border: none;
		padding: 5px;
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-ms-transition: all .5s ease;
		-o-transition: all .5s ease;
		transition: all .5s ease;
		cursor: pointer;
		z-index: 99999;
		width: 16px;
	}

	.icon-bar {
		display: block;
		margin: 4.5px 0;
		height: 2px;
		background-color: #000000;
	}

	.icon-bar.top{
		width: 12px;
		float: right;
	}

	.icon-bar.middle{
		width: 16px;
		float: right;
	}

	.icon-bar.bottom{
		width: 8px;
		float: right;
	}



	.nav-item {
		margin: 40px auto;
		text-align: center;
	}

	.animated {
		display: block;
		margin: 0 auto;
	}


	.animated:focus {
		cursor: pointer;
		z-index: 9999;
	}

	.middle {
		margin: 0 auto;
	}

	.icon-bar {
		-webkit-transition: all .7s ease;
		-moz-transition: all .7s ease;
		-ms-transition: all .7s ease;
		-o-transition: all .7s ease;
		transition: all .7s ease;
		z-index: 999999;
	}

	.animated .icon-bar {
		z-index: 999999;
	}

	.animated .top {
		-webkit-transform: translateY(3px) translatex(-7.8px) rotateZ(-45deg);
		transform: translateY(3px) translatex(-7.8px) rotateZ(-45deg);
	}

	.animated .bottom {
		-webkit-transform: translateY(-3px) translatex(-7.8px) rotateZ(45deg);
		transform: translateY(-3px) translatex(-7.8px) rotateZ(45deg);
	}

	.animated .top {
		width: 10px;
	}
	.animated .bottom {
		width: 10px;
	}

.state2{
  transform: rotate(0deg) scale(.8) translate(-50%,0); 
  -webkit-transform: rotate(0deg) scale(.8) translate(-50%,0); 
}

</style>